<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">


    <title>Clairvoyance</title>
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.png">
    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="/css/font-awesome.css" rel="stylesheet"/>

    <!-- Custom styles for this template -->
    <link href="/css/stylenew.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/register_form.css"/>
    <link rel="stylesheet" href="/css/button.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body>


<div class="container ">

    <form class="form-register"  id="registerform" action="#" method="POST">
        <h2 class="form-register-heading">Create Your Account</h2>
        <br>
        <div class="item">
            <label for="username" class="item-label">Username:</label>
            <input type="text" id="username" name="username" class="item-text" placeholder="Set username"
                   autocomplete="off" tip="Please enter your username">
        </div>
        <div class="item">
            <label for="password" class="item-label">Password:</label>
            <input type="password" id="password" name="password" class="item-text"
                   placeholder="Set password" tip="The length is 3-16 characters">
        </div>
        <div class="item">
            <label for="password" class="item-label">Confirm:</label>
            <input type="password" name="confirm_password" class="item-text" placeholder="Set confirm password" tip="Please enter the password again">
        </div>
        <div class="item">
            <label for="semail" class="item-label">Email:</label>
            <input type="text" id="semail" name="email" class="item-text" placeholder="Set email"
                   autocomplete="off" tip="Please enter your email">
        </div>
        <!-- <div class="item">
            <label for="simage" class="item-label">头像:</label>
            <input type="file" name="simage" class="item-file">
        </div> -->
        <!-- <button class="btn btn-block" href="index.html" type="submit"><i class="fa fa-angle-double-right"></i>&nbsp; &nbsp;&nbsp;&nbsp;   提 &nbsp;&nbsp; 交&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-left"></i></button> -->
        <div>
            <button class="btn btn-theme item-submit"  ><i
                    class="fa fa-angle-double-right"></i>&nbsp;&nbsp;&nbsp;&nbsp;Submit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i
                    class="fa fa-angle-double-left"></i></button>
        </div>
        <br>

        <br>
        <hr>
        <div class="login-social-link centered ">
            <div class="registration">
                <a href="/login">
                    <u> Login</u>
                </a>
            </div>
            <br>
        </div>

        <!-- <div class="login-wrap">
            <input type="text" class="form-control" placeholder="UserName" autofocus>
            <br>
            <input type="text" class="form-control" placeholder="UserName/Email" autofocus>
            <br>
            <input type="password" class="form-control" placeholder="Password">
            <br>
            <input type="password" class="form-control" placeholder="Password">
            <br>

            <button class="btn btn-theme btn-block" href="index.html" type="submit"><i class="fa fa-lock"></i>LOGIN</button>
            <hr>

            <div class="login-social-link centered">
            <div class="registration">
                <a class="" href="#">
                    Create an account
                </a>
            </div>

        </div> -->


    </form>

</div>

<!-- js placed at the end of the document so the pages load faster -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--BACKSTRETCH-->
<!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->


<!-- jquery validate js -->
<script type="text/javascript" src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script type="text/javascript" src="/js/additional-methods.js"></script>
<script type="text/javascript" src="/js/jquery.validate.extend.js"></script>
<script type="text/javascript" src="/js/jquery.backstretch.min.js"></script>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script type="text/javascript">

    $.backstretch(["images/bg.jpg"]);
    let layer = layui.layer;
    $(function () {
        //让当前表单调用validate方法，实现表单验证功能
        $("#registerform").validate({
            submitHandler: function () {
                let data = CoreUtil.formJson("registerform");
                CoreUtil.sendAjax("/user/register", data, function (res) {
                    layer.msg("Register successfully, 3 seconds later automatically jump to the login interface");
                    setTimeout(function () {
                        window.location.href = "/login";
                    }, 3000)

                })
            },
            //debug: true, //调试模式，即使验证成功也不会跳转到目标页面
            rules: {     //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式)
                username: {
                    required: true,  //必填。如果验证方法不需要参数，则配置为true
                    rangelength: [4, 12],
                },
                password: {
                    required: true,
                    rangelength: [3, 16]
                },
                confirm_password: {
                    required: true,
                    equalTo: '#password' //表示和id="spass"的值相同
                },
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                username: {
                    required: "Please enter your username",
                    rangelength: $.validator.format("The length of the username is {0}-{1} characters"),
                    remote: "The username already exists!"
                },
                password: {
                    required: "Please enter your password",
                    rangelength: $.validator.format("The length of the password is {0} - {1} characters")
                },
                confirm_password: {
                    required: "Please enter your password again",
                    equalTo: "The two passwords must be the same" //表示和id="spass"的值相同
                },
                email: {
                    required: "Please enter your email",
                    email: "E-mail format is not correct"
                }

            }
        });
    });

</script>


</body>
</html>
